import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Table, Row, Col, Popconfirm, Affix, Alert, message as componentMessage, Popover} from 'antd';
import {formatAmount} from '../../utils';
import {TABLE, FIXED_COLUMN_WIDTH, ROWSELECTION_FIXED_COLUMN_WIDTH} from '../../constants';
import {formatMessage} from '../intl';
import style from '../../style.css';
import {sortPartAndCategory} from '../utils';

class WorkItemTablePanel extends PureComponent {
    state = {
        showSelectPartPanel: false,
        selectedRowKeys: [],
        isShowDelectPanel: false
    }
    affixOnChange = () => this.forceUpdate();
    onSelectedChange = keys => this.setState({
        selectedRowKeys: keys
    });
    onClickBatchReceive = () => {
        const selectIds = this.state.selectedRowKeys;
        if(selectIds.length === 0)
            componentMessage.warning(formatMessage({
                id: 'workItemDetailPanel.btn.ValidationMessage',
                defaultMessage: '请选择需要批量操作的选项'
            }));
        else {
            this.setState({
                loading: true,
                isShowDelectPanel: false
            });
            this.props.onDeleteAllWorkItem(selectIds);
        }
    }
    onDeleteAll = () => {
        this.setState({
            isShowDelectPanel: true
        });
    }
    onEndBatchOperation = () => {
        this.setState({
            selectedRowKeys: [],
            isShowDelectPanel: false
        });
    }
    onDeleteWorkItem = id => {
        this.props.onDeleteWorkItem(id);
    };
    render() {
        const data = this.props.data.sort(sortPartAndCategory);
        const {isShowDelectPanel} = this.state;
        const columns = [
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.usedPartCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.partProductCategoryCodes} title={formatMessage({
                    id: 'workItemDetailPanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            }, {
                title: formatMessage({
                    id: 'workItemDetailPanel.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark'
            }
        ];
        if(!this.props.isMoneyVisible)
            columns.splice(5, 0,
                {
                    title: formatMessage({
                        id: 'workItemDetailPanel.laborPrice',
                        defaultMessage: '工时单价'
                    }),
                    dataIndex: 'laborPrice',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'workItemDetailPanel.laborFee',
                        defaultMessage: '工时费'
                    }),
                    dataIndex: 'laborFee',
                    render: text => formatAmount(text)
                });
        if(!isShowDelectPanel)
            columns.push({
                title:
                data && data.length > 0 ? (
                    <a onClick={this.onDeleteAll}>{formatMessage({
                        id: 'workItemDetailPanel.column.empty',
                        defaultMessage: '批量删除'
                    })}</a>
                ) : (
                    <a>
                        {formatMessage({
                            id: 'workItemDetailPanel.clear',
                            defaultMessage: '批量删除'
                        })}
                    </a>
                ),
                dataIndex: 'id',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: text => (
                    <a data-id={text} onClick={() => this.onDeleteWorkItem(text)}>
                        {formatMessage({
                            id: 'btn.delete',
                            defaultMessage: '删除'
                        })}
                    </a>
                )
            });
        const rowSelection = isShowDelectPanel ? {
            fixed: true,
            type: 'checkbox',
            columnWidth: ROWSELECTION_FIXED_COLUMN_WIDTH,
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onSelectedChange
        } : undefined;
        const receiveMessage = (<Row>
            <Col span={19}>{
                formatMessage({
                    id: 'workItemDetailPanel.Validation.Message',
                    defaultMessage: '正在进行批量操作，点击右侧关闭将退出操作'
                })
            }</Col>
            <Col span={5} className="col-align-right">
                <Popconfirm
                    id="batchReceive"
                    key="batchReceive"
                    getPopupContainer={this.getPopupContainer} title={formatMessage({
                        id: 'workItemDetailPanel.Validation.isContinue',
                        defaultMessage: '是否继续?'
                    })}
                    onConfirm={this.onClickBatchReceive}>
                    <a className={style.panelalertMessage} >{formatMessage({
                        id: 'workItemDetailPanel.btn.BatchReceive',
                        defaultMessage: '批量删除'
                    })}</a>
                </Popconfirm>
            </Col>
        </Row>);
        return (
            <div>
                {isShowDelectPanel && <Affix offsetTop={0} className={style.alertMargin} onChange={this.affixOnChange}>
                    <Alert message={receiveMessage} type="warning" closable showIcon
                        closeText={<span className={style.closeText}>{formatMessage({
                            id: 'workItemDetailPanel.btn.close',
                            defaultMessage: '关闭'
                        })}</span>} onClose={this.onEndBatchOperation} />
                </Affix>}
                <Table
                    className="white-space-nowrap"
                    rowKey="id"
                    columns={columns}
                    pagination={false}
                    dataSource={data}
                    rowSelection={rowSelection}
                    {...TABLE}/>
            </div>
        );
    }
}

WorkItemTablePanel.propTypes = {
    data: PropTypes.array,
    isMoneyVisible: PropTypes.bool,
    onDeleteAllWorkItem: PropTypes.func,
    onDeleteWorkItem: PropTypes.func
};

export default WorkItemTablePanel;
